<template>
	<view>
		<view class="myIssue">
			<view v-for="(item,index) in issueList" :key="index" class="issueItem">
				<view class="itemTop">
					<view class="itemTopLft">
						<image src="/static/images/douyin1.png"></image>
					</view>
					<view class="itemTopRight">
						<view class="issueClass">{{ item.task_name }}</view>
						<view class="issueDetail">
							{{ item.description? item.description : '无任务描述' }}
						</view>
						<view class="issueNum">
							<view>
								<text>总量: {{ item.count.total }}</text>
							</view>
							<view>
								<text class="toReceive">待领取: </text>
								<text>{{ item.count.no_receive }}</text>
							</view>
						</view>
						<view class="issueNum">
							<view>
								<text class="alreadyReceive">已领取: </text>
								<text>{{ item.count.receive }}</text>
							</view>
							<view>
								<text class="audit">审核中: </text>
								<text>{{ item.count.pass }}</text>
							</view>
						</view>
						<view class="issueNum">
							<view>
								<text class="error">已失败: </text>
								<text>{{ item.count.fail }}</text>
							</view>
							<view>
								<text class="success">已完成: </text>
								<text>{{ item.count.success }}</text>
							</view>
						</view>
						<view class="itemBtm">
							<view class="endTime" v-if="item.end_time">
								截止时间:{{ item.end_time }}
							</view>
							<view v-else>
								截止时间:无
							</view>
							<view class="total">
								<text>任务总额:</text>
								<text style="color: #FF0001;">￥</text>
								<text class="totalNum">{{ item.amount }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="itemBtm">
					<view class="endTime" v-if="item.end_time">
						截止时间:{{ item.end_time | formatDate }}
					</view>
					<view v-else>
						截止时间:无
					</view>
					<view class="total">
						<text>任务总额:</text>
						<text style="color: #FF0001;">￥</text>
						<text class="totalNum">{{ item.amount }}</text>
					</view>
				</view> -->
			</view>
			<view class="over_line" v-if="isover"> ----- 加载完毕 ------ </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				issueList:[],
				pagenum: 1, // 页码值
				pagesize: 15, // 每页显示多少条数据
				total:'',
				isover: false ,// 判断是否到底部，给用户提示
				isloading: false // 判断数据是否在加载中
			};
		},
		onLoad() {
			this.getIssue()
		},
		methods:{
			// 获取我的发布
			getIssue() {
				// 正在加载下页数据
				this.isloading = true
				this.$api.getPostList({
					page:this.pagenum,
					limit:this.pagesize
				},res => {
					this.total = res.data.count
					this.issueList = [...this.issueList,...res.data.list]
					// 没有在加载下页数据
					this.isloading = false
				})
			}
		},
		onReachBottom() {
			// 判断当前是否正在请求数据中
			if (this.isloading) {
				return
			}
			if (this.pagesize * this.pagenum >= this.total) {
				this.isover = true
				return
			}
			this.pagenum++
			this.getIssue()
		}
	}
</script>

<style lang="less">
.myIssue {
	padding: 20rpx;
	.issueItem {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		width: 712rpx;
		height: 480rpx;
		border-radius: 10rpx;
		padding: 30rpx;
		.itemTop {
			display: flex;
			.itemTopLft{
				width: 80rpx;
				height: 80rpx;
				margin-right: 30rpx;
				margin-top: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.itemTopRight{
				flex: 1;
				line-height: 60rpx;
				font-size: 30rpx;
				.issueClass {
					color: #2A2929;
				}
				.issueDetail {
					width: 542rpx;
					font-size: 28rpx;
					color: #9A9A9A;
					white-space:nowrap;
					text-overflow:ellipsis;
					overflow:hidden;
				}
				.issueNum {
					display: flex;
					view {
						flex: 1;
					}
					.toReceive {
						color: #84CC2C;
					}
					.alreadyReceive {
						color: #FCAE14;
					}
					.audit {
						color: #5256FF;
					}
					.error {
						color: #EE4C48;
					}
					.success {
						color: #84CC2C;
					}
				}
				.itemBtm {
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					font-size: 30rpx;
					color: #504E52;
					.endTime {
						flex: 1;
						margin-top: 8rpx;
						white-space:nowrap;
					}
					.total {
						white-space:nowrap;
						.totalNum {
							font-size: 42rpx;
							color: #FF0001;
						}
					}
				}
			}
		}
		
		.itemBtm {
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			font-size: 30rpx;
			color: #504E52;
			.endTime {
				flex: 1;
				margin-top: 8rpx;
				white-space:nowrap;
			}
			.total {
				white-space:nowrap;
				.totalNum {
					font-size: 42rpx;
					color: #FF0001;
				}
			}
		}
	}
	.issueItem:last-child {
		margin-bottom: 0;
	}
}
</style>
